fix(feedback): Wrap long error messages in the feedback dialog - #23004
fix(feedback): Wrap long error messages in the feedback dialog#23004Souptik96 wants to merge 1 commit into
Conversation
`.form__error-container` only declared `color` and `fill`, so an error message containing a token longer than the container overflowed the dialog instead of breaking onto the next line. The container is rendered at `var(--form-width, 272px)` while the screenshot editor is open, and `FeedbackErrorMessages` lets integrators supply arbitrary error copy, so long unbroken tokens are expected input rather than an edge case. Adds `overflow-wrap: break-word`, which only breaks a word when it cannot fit on a line of its own and leaves normal whitespace wrapping untouched.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit abd0224. Configure here.
| .form__error-container { | ||
| color: var(--error-color); | ||
| fill: var(--error-color); | ||
| overflow-wrap: break-word; |
There was a problem hiding this comment.
Wrap fix ineffective in flex layout
Medium Severity
overflow-wrap: break-word on .form__error-container does not reduce min-content size, so nested flex items (.form__top, .form__label, and the fieldset.form__right column) keep min-width: auto and still expand past the 272px panel. Long tokens can keep overflowing—especially in Firefox, where this was reported—so the dialog overflow likely remains.
Reviewed by Cursor Bugbot for commit abd0224. Configure here.


Closes #14930
Problem
.form__error-containerdeclared onlycolorandfill:With no wrapping or overflow handling, an error message containing a token wider than the container runs out of the dialog instead of breaking onto the next line.
Two things make that reachable rather than theoretical:
.form__right, which iswidth: var(--form-width, 272px)whenever the screenshot editor is open (.dialog__position:has(.editor) .form__right). 272px is narrow.resolveFeedbackErrorMessagereads from the caller-suppliedFeedbackErrorMessagesoption, so integrators can pass arbitrary error copy — including localized text with long compound words. Arbitrary-length, arbitrary-language strings are expected input here.Both error slots in
Form.tsxuse the class (the submit error and the screenshot error), so one rule covers both.Change
Adds a single declaration:
break-wordrather thananywhereon purpose: it breaks a word only when the word cannot fit on a line by itself, and it does not change the element's intrinsic min-content contribution, so no surrounding layout shifts. Normal whitespace wrapping is untouched.This is the first wrapping declaration in the package — there was no existing convention in
packages/feedbackto follow (git grepforoverflow-wrap|word-break|white-spaceinpackages/feedback/srcreturns nothing), so I picked the least invasive standard property. Happy to switch toanywhereor addmin-width: 0if you'd rather be more aggressive.Verification
packages/feedback,yarn test:develop: 4 files / 24 tests pass.--error-colortokens, and thenonceattribute) pass unpatched, so they are not coupled to the fix.oxlint .inpackages/feedback: 0 warnings, 0 errors.oxfmt --check: the new test file is clean. I deliberately did not runoxfmt --writeonDialog.css.ts— it is already reported as unformatted on unmodifieddevelop, and reformatting it would bury a one-line change in unrelated churn.What I could not verify
jsdom does not do layout, so no unit test here can prove the text visually wraps. The new test asserts the declaration is emitted on the correct rule, which is why I extract the single rule block rather than matching against the whole stylesheet — a
.form__error-containerrename fails the test loudly instead of passing vacuously. Visual confirmation in Firefox (where #14930 was reported) still needs a human or a browser-integration test; say the word if you'd like me to add one underdev-packages/browser-integration-testsinstead.I also could not see the screenshot on #14930 render, so I confirmed the root cause from source rather than from the reported repro.
yarn lint) & (yarn test).